<template>
    <div class="goodsEdit_container">
        <el-row type="flex" align="middle">            
            <el-col :span="1" :offset="8">
                <i class="el-icon-sold-out"></i>
            </el-col>
            <el-col :span="3">
                <h1>修改商品</h1>
            </el-col>
            <el-col :span="3" :offset="9">
                <el-button-group>
                    <el-tooltip content="提交修改" placement="top-end">
                        <el-button
                            type="success"
                            icon="el-icon-document-checked"
                            circle
                            plain
                            size="mini"
                            @click="checkEditGoodsCateForm"
                        >
                        </el-button>
                    </el-tooltip>
                    <el-tooltip :content="actionPageStr=='4' ? '清空图片':'重置此页'" placement="top">
                        <el-button
                            type="info"
                            icon="el-icon-refresh-right"
                            circle
                            plain
                            size="mini"
                            @click="resetFormPage"
                        >
                        </el-button>
                    </el-tooltip>
                    <el-tooltip content="取消修改" placement="top-start">
                        <el-button
                            type="danger"
                            icon="el-icon-close"
                            circle
                            plain
                            size="mini"
                            @click="$router.push('/goods')"
                        >
                        </el-button>  
                    </el-tooltip>
                </el-button-group>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="22" :offset="1">
                    <el-tabs v-model="actionPageStr" tab-position="right" @tab-click="changeForm">
                        <el-tab-pane name="1">
                            <span slot="label"><i class="el-icon-document"></i> 基本信息</span>
                            <el-form
                                :model="goodsEditInfoForm"
                                :rules="goodsEditInfoFormRules"
                                ref="goodsEditInfoFormRef"
                                label-position="right"
                                label-width="80px"
                                status-icon
                            >
                                <el-row>
                                    <el-col :span="22" :offset="1">
                                        <el-form-item label="商品名称" prop="editGoodsName">
                                            <el-input
                                                v-model="goodsEditInfoForm.editGoodsName"
                                                clearable
                                                placeholder="请输入商品名称"
                                                :maxlength="60"
                                                show-word-limit
                                            >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="7" :offset="1">
                                        <el-form-item label="商品价格"  prop="editGoodsPrice">
                                            <el-input
                                                v-model="goodsEditInfoForm.editGoodsPrice"
                                                clearable
                                                placeholder="请输入价格"
                                            >
                                            <template slot="append">元</template>
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="7" :offset="1">
                                        <el-form-item label="商品重量" prop="editGoodsWeight">
                                            <el-input 
                                                v-model.number="goodsEditInfoForm.editGoodsWeight"
                                                clearable 
                                                placeholder="请输入重量"
                                            >
                                            <template slot="append">kg</template>
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6" :offset="1">
                                        <el-form-item label="商品数量" prop="editGoodsNum">
                                            <el-input-number
                                                v-model="goodsEditInfoForm.editGoodsNum"
                                                controls-position="right"
                                                :min="1"
                                                :max="9999"
                                                placeholder="请输入数量"
                                                style="width:100%"
                                            >
                                            </el-input-number>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="22" :offset="1">
                                        <el-form-item label="商品介绍" prop="editGoodsCateIntroduce">
                                        <el-input
                                            type="textarea"
                                            :autosize="{ minRows: 3, maxRows: 6}"
                                            :maxlength="600"
                                            resize="none"
                                            clearable
                                            placeholder="请输入商品介绍内容"
                                            v-model="goodsEditInfoForm.editGoodsCateIntroduce">
                                        </el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="11" :offset="1">
                                        <el-form-item label="商品分类" prop="editGoodsCate">
                                            <el-cascader
                                                    clearable
                                                    v-model="goodsEditInfoForm.editGoodsCate"
                                                    :options="goodsCateList"
                                                    :props="cascaderProps"
                                                    @change="changeGoodsCate"
                                                    style="width:100%"
                                                    v-show="showGoodsCatePath"
                                                >
                                            </el-cascader>
                                            <el-tooltip content="原商品分类，点击可修改" placement="right" effect="light">
                                                <el-button
                                                        type="text"
                                                        @click="backChooseGoodsCate"
                                                        v-show="!showGoodsCatePath"
                                                    >
                                                    {{beforeEditGoodsCatePath}}
                                                </el-button>
                                            </el-tooltip>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="1">
                                        <el-button
                                        type="text"
                                        size="small"
                                        v-show="showGoodsCatePath"
                                        style="font-size:20px;"
                                        @click="showGoodsCatePath=false"
                                        >
                                            &nbsp;<i class="el-icon-circle-close"></i>
                                        </el-button>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane name="2">
                            <span slot="label"><i class="el-icon-price-tag"></i> 商品属性</span>
                            <el-form label-position="right" label-width="11vw">
                            <el-row v-if="goodsStaticParamsList.length != 0" class="taHeight">
                                <el-col :span="10" :offset="1" v-for="sItem in goodsStaticParamsList" :key="sItem.attr_id">
                                    <el-form-item :label="sItem.attr_name">
                                        <el-input clearable v-model="sItem.attr_vals"></el-input>
                                        <!-- <el-input clearable v-model="sItem.attr_value"></el-input> -->
                                    </el-form-item>                                    
                                </el-col>
                            </el-row>
                            <el-row v-else>
                                <el-col>
                                    <el-empty
                                        image="https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f4f0/u1f4f0_u1f4f0.png"
                                        description="暂无预设商品属性"
                                    >
                                    </el-empty>
                                </el-col>
                            </el-row>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane name="3">
                            <span slot="label"><i class="el-icon-discount"></i> 商品参数</span>
                            <el-form label-position="top">
                            <el-row v-if="goodsDynamicParamsList.length != 0">
                                <el-col :span="22" :offset="1" class="taHeight">
                                    <el-form-item
                                        v-for="dItem in goodsDynamicParamsList"
                                        :key="dItem.attr_id"
                                        :label="dItem.attr_name"
                                    >
                                        <el-checkbox-group v-model="dItem.attr_vals" v-if="dItem.copyList.length != 0">
                                        <!-- <el-checkbox-group v-model="dItem.attr_value" v-if="dItem.copyList.length != 0"> -->
                                            <el-checkbox
                                                v-for="(cbItem,index) in dItem.copyList"
                                                :key="index"
                                                :label="cbItem"
                                                border
                                                size="mini"
                                                :style="index | chooseColor"
                                            >
                                            </el-checkbox>
                                        </el-checkbox-group>
                                        <el-alert
                                            v-else
                                            title="暂无商品参数项"
                                            type="info"
                                            show-icon
                                            style="line-height:20px;width:11vw"
                                        >
                                        </el-alert>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row v-else>
                                <el-col>
                                    <el-empty
                                        image="https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f4f0/u1f4f0_u1f4f0.png"
                                        description="暂无预设商品参数"
                                    >
                                    </el-empty>
                                </el-col>
                            </el-row>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane name="4">
                            <span slot="label"><i class="el-icon-picture-outline"></i> 商品图片</span>
                            <el-form>
                                <el-row>
                                    <el-col :span="22" :offset="1" class="taHeight">
                                        <el-form-item>
                                            <el-upload
                                                action="http://127.0.0.1:8888/api/private/v1/upload"
                                                ref="uploadPicsRef"
                                                :headers="headerObj"
                                                :on-preview="handlePreview"
                                                :on-remove="handleRemove"
                                                :before-upload="handleBeforeUpload"
                                                :on-success="handleSuccess"
                                                list-type="picture"
                                                accept=".png,.jpeg,.jpg,.gif"  
                                                :file-list="pics"
                                                drag
                                            >
                                                <div style="width:59.8vw">
                                                    <i class="el-icon-upload"></i>
                                                    <div class="el-upload__text" >
                                                        将图片拖到此处，或<em>点击上传</em>
                                                        <p style="font-size:10px;margin-top:-10px" class="el-upload__tip">要求格式:jpg/png/jpeg 不支持多选</p>
                                                    </div>
                                                </div>
                                            </el-upload>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row type="flex" justify="end" align="end" class="bottomText">
                                    <el-col :span="2" :offset="1">
                                        <p>图片统计：</p>
                                    </el-col>
                                    <el-col :span="2">
                                        <p>
                                            原有 <span style="color:#409eff">{{beforePicsNum}}</span> 张
                                        </p>
                                    </el-col>
                                    <el-col :span="2">
                                        <p>
                                            新上传 <span style="color:#409eff">{{newaddPicsNum}}</span> 张
                                        </p>
                                    </el-col>
                                    <el-col :span="2">
                                        <p>
                                            已删除 <span style="color:#409eff">{{deletePicsNum}}</span> 张
                                        </p>
                                    </el-col>
                                    <el-col :span="2">
                                        <p>
                                            共计 <span style="color:#409eff">{{pics.length}}</span> 张
                                        </p>
                                    </el-col>
                                    <el-col :span="1"></el-col>
                                </el-row>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
            </el-col>
        </el-row>
        <div class="picsPreview" v-show="picsVisible" >
            <span class="closeBtn" @click="showPics">&times;</span>
            <el-image :src="picsPreviewUrl" class="image"></el-image>            
        </div>
    </div>
</template>

<script>
export default({
    name:'goodsedit',
    data(){
        var checkName = (rule, value, callback) => {
            if(isNaN(value)){
                callback();
            }else{
                callback(new Error('商品名称不能是纯数字！'));
            }
        };
        var checkPrice = (rule, value, callback) => {
            if(value) {
                let rePrice = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
                if(rePrice.test(value)) {
                    if(value > 999999999 || value < 0){
                        callback(new Error('商品价格应在合理范围值！'));
                    }else{
                        callback();
                    }
                    callback();
                }else{
                    callback(new Error('请输入合法的商品价格！'));
                }
            }else{
                callback();
            }
        };
        var checkWeight = (rule, value, callback) => {
            if(value) {
                let reWeight = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
                if(reWeight.test(value)) {
                    if(value > 999999 || value < 0){
                        callback(new Error('商品重量应在合理范围值！'));
                    }else{
                        callback();
                    }
                    callback();
                }else{
                    callback(new Error('请输入合法的商品重量！'));
                }
            }else{
                callback();
            }
        };

        return {
            actionPageStr:'1',

            //商品分类路径名字
            beforeEditGoodsCatePath:'',
            showGoodsCatePath:false,

            goodsEditInfoForm:{
                editGoodsID:'',
                editGoodsName:'',
                editGoodsPrice:'',
                editGoodsWeight:'',
                editGoodsNum:1,
                editGoodsCate:[],
                editGoodsCateCopy:[],
                editGoodsCatePush:[],
                editGoodsCateIntroduce:'',
            },
            goodsCateList:[],
            cascaderProps:{
                value: 'cat_id',
                label:'cat_name',
                children: 'children',
                expandTrigger:'hover',
            },
            goodsEditInfoFormRules:{
                editGoodsName:[
                    {
                        required: true,
                        message: '商品名称不能为空！',
                        trigger: 'blur'
                    },
                    {
                        max: 60,
                        message: '商品名称过长！',
                        trigger: 'blur'
                    },
                    {
                        validator: checkName,
                        trigger: 'blur'
                    },
                ],
                editGoodsPrice:[
                    {
                        required: true,
                        message: '商品价格不能为空！',
                        trigger: 'blur'
                    },
                    {
                        validator: checkPrice,
                        trigger: 'blur'
                    },
                ],
                editGoodsWeight:[
                    {
                        required: true,
                        message: '商品重量不能为空！',
                        trigger: 'blur'
                    },
                    {
                        validator: checkWeight,
                        trigger: 'blur'
                    },
                ],
                editGoodsNum:[
                    {
                        required: true,
                        message: '商品数量不能为空！',
                        trigger: 'blur'
                    },
                    {
                        type: 'number',
                        message: '数量必须为阿拉伯数字'
                    }
                ],
                editGoodsCate:[
                    {
                        required: true,
                        message: '商品分类不能为空！',
                        trigger: 'blur'
                    },
                ],
                editGoodsCateIntroduce:[
                    {
                        max: 600,
                        message: '商品介绍内容过长！请控制在600字符之间',
                        trigger: 'blur'
                    }
                ]

            },
            goodsStaticParamsList:[],
            goodsDynamicParamsList:[],
            headerObj:{
                Authorization:window.sessionStorage.getItem('token')
            },
            pics:[],
            picsPreviewUrl:'',
            picsVisible:false,
            beforePicsNum:0,
            newaddPicsNum:0,
            deletePicsNum:0,

            attrs:[],
            infoFormFirst:true,
            staticFormFirst:true,
            dynamicFormFirst:true,
        }
    },
    created(){
        this.goodsEditInfoForm.editGoodsID = this.$store.state.editGoodsID;
        this.getgoodsCateList();
        this.changeForm();
    },
    methods:{
        async getBeforeGoodInfo(){
            const { data: res } = await this.$http.get(`goods/${this.goodsEditInfoForm.editGoodsID}`);
            if(res.meta.status == 200){
                res.data.pics.forEach(pItem => {
                    pItem.pic = pItem.pics_sma;
                    pItem.name = pItem.pics_sma;
                    pItem.url = pItem.pics_sma_url;
                });
                this.goodsEditInfoForm.editGoodsName = res.data.goods_name;
                this.goodsEditInfoForm.editGoodsPrice = res.data.goods_price;
                this.goodsEditInfoForm.editGoodsWeight = res.data.goods_weight;
                this.goodsEditInfoForm.editGoodsNum = res.data.goods_number;
                this.goodsEditInfoForm.editGoodsCateIntroduce = res.data.goods_introduce;
                this.goodsEditInfoForm.editGoodsCate.push(res.data.cat_one_id,res.data.cat_two_id,res.data.cat_three_id)
                this.goodsEditInfoForm.editGoodsCateCopy = this.goodsEditInfoForm.editGoodsCate;
                this.askBeforeGoodPath(res.data.cat_one_id,res.data.cat_two_id,res.data.cat_three_id)
                this.pics = res.data.pics;
                this.beforePicsNum = this.pics.length;
                this.attrs = res.data.attrs;

                // console.log(this.attrs);
                // this.attrs.forEach(pitem =>{
                //     if(pitem.attr_sel === 'only'){
                //         console.log('1')
                //         this.goodsStaticParamsList.push(pitem)
                //     }else if(pitem.attr_sel === 'many'){
                //         console.log('2')
                //         this.goodsDynamicParamsList.push(pitem)
                //     }
                // })
                // console.log(this.goodsStaticParamsList)
                // console.log(this.goodsDynamicParamsList)

            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '获取商品原信息失败！'
                    }
                )
            }
        },
        async askBeforeGoodPath(value1,value2,value3){
            const { data: res1 } = await this.$http.get(`categories/${value1}`);
            const { data: res2 } = await this.$http.get(`categories/${value2}`);
            const { data: res3 } = await this.$http.get(`categories/${value3}`);
            this.beforeEditGoodsCatePath = res1.data.cat_name+ ' / ' +res2.data.cat_name+ ' / ' +res3.data.cat_name;
        },
        async getgoodsCateList(){
            const { data: res } = await this.$http.get('categories',{params:{type: 3}});
            if(res.meta.status == 200){
                this.goodsCateList = res.data;
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '获取商品分类失败！'
                    }
                )
            }
        },
        backChooseGoodsCate(){
            this.goodsEditInfoForm.editGoodsCate = this.goodsEditInfoForm.editGoodsCateCopy;
            this.showGoodsCatePath= !this.showGoodsCatePath;
        },
        async changeGoodsCate(){
            if(this.goodsEditInfoForm.editGoodsCate.length == 2 || this.goodsEditInfoForm.editGoodsCate.length == 1)
            {
                this.goodsEditInfoForm.editGoodsCate = [];
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'warning',
                        duration:2000,
                        message: '仅能选择第三级商品分类!请重选！'
                    }
                )
            }
        },
        async getgoodsStaticParams(){
            if(this.goodsEditInfoForm.editGoodsCate.length == 3 && this.actionPageStr == '2'){
                let CateParamsID = this.goodsEditInfoForm.editGoodsCate[this.goodsEditInfoForm.editGoodsCate.length -1];
                const { data: res} = await this.$http.get(`categories/${CateParamsID}/attributes`,
                    {params:{sel:'only'}}
                );
                if(res.meta.status == 200){
                    this.goodsStaticParamsList = res.data
                }else{
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            type: 'warning',
                            duration:2000,
                            message: '获取商品属性失败！'
                        }
                    )
                }
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'warning',
                        duration:2000,
                        message: '获取商品属性失败！请检查是否已选择第三级商品分类！'
                    }
                )
            }
        },
        async getgoodsDynamicParams(){
            if(this.goodsEditInfoForm.editGoodsCate.length == 3 && this.actionPageStr == '3'){
                let CateParamsID = this.goodsEditInfoForm.editGoodsCate[this.goodsEditInfoForm.editGoodsCate.length -1];
                const { data: res} = await this.$http.get(`categories/${CateParamsID}/attributes`,
                    {params:{sel:'many'}}
                );
                if(res.meta.status == 200){
                    res.data.forEach(item => {
                        item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : [];
                        //作深度拷贝，显示用拷贝项，操作用数据项
                        item.copyList = item.attr_vals;
                    });
                    this.goodsDynamicParamsList = res.data
                }else{
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            type: 'warning',
                            duration:2000,
                            message: '获取商品参数失败！'
                        }
                    )
                }
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'warning',
                        duration:2000,
                        message: '获取商品参数失败！请检查是否已选择第三级商品分类！'
                    }
                )
            }
        },
        handlePreview(file){
            try{
                this.picsPreviewUrl = file.response.data.url;
            }catch(e){
                this.picsPreviewUrl = file.url;
            }
            this.showPics()
        },
        showPics(){
            this.picsVisible = !this.picsVisible
        },
        handleRemove(file){
            var filePath
            try{
                filePath = file.response.data.tmp_path;
            }catch(e){
                filePath = file.url;
            }
            const picIndex = this.pics.findIndex(picPath => picPath.pic === filePath);
            this.pics.splice(picIndex,1);
            this.deletePicsNum++;
        },
        handleBeforeUpload(file){
            var rePic = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/;
            if (!rePic.test(file.name)){
                this.pics.splice(this.pics.length,1);
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'warning',
                        duration:2000,
                        message: '请上传格式是gif或jpeg或jpg或png的图片！'
                    }
                )
            }
        },
        handleSuccess(response){
                const picinfo ={
                    pic:response.data.tmp_path,
                    name:response.data.tmp_path,
                    url:response.data.url
                };
                this.pics.push(picinfo);
                this.newaddPicsNum++;                
        },
        changeForm(){
            switch (this.actionPageStr){
                case '1':
                    if(this.infoFormFirst){
                        this.infoFormFirst = false;
                        this.getBeforeGoodInfo();
                    }
                break;
                case '2':
                    if(this.staticFormFirst){
                        this.staticFormFirst = false;
                        this.getgoodsStaticParams();
                    }
                break;
                case '3':
                    if(this.dynamicFormFirst){
                        this.dynamicFormFirst = false;
                        this.getgoodsDynamicParams();
                    }
                break;
            }
        },
        resetFormPage(){
            switch (this.actionPageStr){
                case '1':
                    this.$refs.goodsEditInfoFormRef.resetFields();
                    this.getBeforeGoodInfo();
                    this.backChooseGoodsCate();
                break;
                case '2':
                    this.getgoodsStaticParams();
                break;
                case '3':
                    this.getgoodsDynamicParams();
                break;
                case '4':
                    this.deletePicsNum += this.pics.length;
                    this.newaddPicsNum = 0;
                    this.$refs.uploadPicsRef.clearFiles();
                    this.pics = [];
                break;
            }
        },
        checkEditGoodsCateForm(){
            this.$refs.goodsEditInfoFormRef.validate((valid)=>{
                if(valid){
                    this.goodsEditInfoForm.editGoodsCatePush = this.goodsEditInfoForm.editGoodsCate.join(',');

                    this.goodsStaticParamsList.forEach(sItem => {
                        const sInfo = {
                            attr_id: sItem.attr_id,
                            attr_value: sItem.attr_vals
                        }
                        this.attrs.push(sInfo);
                    })
                    this.goodsDynamicParamsList.forEach(dItem => {
                        const dInfo = {
                            attr_id: dItem.attr_id,
                            attr_value: dItem.attr_vals.join(',')
                        }
                        this.attrs.push(dInfo);
                    })

                    this.pushEditGoodsCateForm();
                }else{
                    this.actionPageStr = "1";
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            duration:2000,
                            message: '请填写商品基本信息！'
                        }
                    );
                }
            })
        },
        async pushEditGoodsCateForm(){
            const { data: res } = await this.$http.put(`goods/${this.goodsEditInfoForm.editGoodsID}`,
                {
                    goods_name: this.goodsEditInfoForm.editGoodsName,
                    goods_cat: this.goodsEditInfoForm.editGoodsCatePush,
                    goods_price: this.goodsEditInfoForm.editGoodsPrice,
                    goods_number: this.goodsEditInfoForm.editGoodsNum,
                    goods_weight: this.goodsEditInfoForm.editGoodsWeight,
                    goods_introduce: this.goodsEditInfoForm.editGoodsCateIntroduce,
                    pics: this.pics,
                    attrs: this.attrs
                }
            );
            if(res.meta.status == 200){
                this.$router.push('/goods');
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '修改商品信息成功！'
                    }
                )
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: res.meta.msg
                    }
                )
            }
        }
    },
    filters:{
        chooseColor(value){
            switch(value%3){
                case 0:
                    return 'color:#2b4b6b'
                break;
                case 1:
                    return 'color:#ffb417'
                break;
                case 2:
                    return 'color:#dd4f42'
                break;
            }
        }
    }
})
</script>

<style lang="less" scoped>
    .goodsEdit_container{
        width: 80vw;
        background-color: #fff;
        padding: 8px;
        margin:4vh auto;
        border-radius: 15px;
        box-shadow: 0 1px 15px #cbcbcb;
        h1{
            color: #3a2c3b;
            letter-spacing: 6px;
        }
        .taHeight{
            min-height:40vh;
            max-height:55vh;
            overflow-y: scroll;
        }
        .bottomText{
            font-size: 14px;
            font-weight: bold;
        }
        .el-checkbox{
            margin:0;
            border-radius:100px;
        }
    }
    .picsPreview{
        z-index: 999;
        width: 100%;
        height: 100%;
        background-color: rgba(30,30,30,0.9);
        position: absolute;
        top: 0;
        left: 0;
        .closeBtn{
        position:absolute;
        top:0;
        right:24px;
        color:#f1f1f1;
        font-size:40px;
        font-weight:bold;
        transition:0.3s;
        }
        .closeBtn:hover,
        .closeBtn:focus{
        color:#bbb;
        cursor:pointer;
        }
        .image{
            width:70vw;
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
        }
    }
    ::-webkit-scrollbar
    {
        width: 0px;
        background-color: #F5F5F5;
    }

</style>